<template>
  <div class="about">
    <div class="info">
      <div class="h-Nav" v-show="$store.state.user.id!=undefined">
        <router-link to="/userInfo">
          <div class="header info-img">
            <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=306866231,3734457839&fm=58&bpow=1080&bpoh=1920"
                 width="70"
                 height="70">
          </div>
          <div class="header info-text">
            <div class="nickName">{{$store.state.user.nickname}}</div>
            <div class="mobile">手机号：{{$store.state.user.telPhone}}</div>
          </div>
          <div class="info-right">
            <Icon type="chevron-right"></Icon>
          </div>
        </router-link>
      </div>
      <div class="login" v-show="$store.state.user.id==undefined">
        <div class="sub">
          <Button type="primary" style="width: 100px;" @click="goLogin">登录</Button>
        </div>
      </div>
    </div>

    <div class="menu">
      <div @click="handleMenu('/userInfo')" class="menuDesc" v-show="$store.state.user.id!=undefined">
        <Icon type="person"></Icon>
        <span>个人中心</span>
        <div style="float: right">
          <Icon type="chevron-right"></Icon>
        </div>
      </div>
      <div v-for="item in myData" @click="handleMenu(item.path)" class="menuDesc">
        <Icon :type="item.icon"></Icon>
        <span>{{item.text}}</span>
        <div style="float: right">
          <Icon type="chevron-right"></Icon>
        </div>
      </div>
      <div @click="handleMenu('/logOut')" class="menuDesc" v-show="$store.state.user.id!=undefined">
        <Icon type="android-exit"></Icon>
        <span>退出</span>
        <div style="float: right">
          <Icon type="chevron-right"></Icon>
        </div>
      </div>
    </div>

    <!---->
    <!--<Modal v-model="ifModal" class-name="del_dialog">-->
    <!--<p slot="header" class="del_header">-->
    <!--<Icon type="information-circled"></Icon>-->
    <!--<span>上传头像</span>-->
    <!--</p>-->
    <!--<div class="del_content">-->
    <!--<p class="text">本地相册</p>-->
    <!--<p>相机</p>-->
    <!--</div>-->
    <!--<div slot="footer" class="del_footer">-->
    <!--&lt;!&ndash;<Button type="error" size="large" long @click="close">放弃</Button>&ndash;&gt;-->
    <!--</div>-->
    <!--</Modal>-->
    <c-footer></c-footer>
  </div>
</template>
<script>
  import CFooter from '../../components/Footer.vue'
  import Header from '../../components/header.vue'
  import * as type from '../../store/mutations_type.js'

  export default {
    components: {
      CFooter,
      Header
    },
    data () {
      return {
        ifModal: false,
        myData: [
          {text: '关于我们', path: '/aboutUS', icon: 'person-stalker', hide: false},
          {text: '主题切换', path: '/them', icon: 'toggle-filled', hide: false},
          {text: '帮助与反馈', path: '/feedback', icon: 'information-circled', hide: false},
          {text: '联系我们', path: '/tel', icon: 'ios-telephone', hide: false}
        ]
      }
    },
    methods: {
      handleMenu (path) {
        if (path == '/logOut') {
          //退出清楚用户信息
          this.$store.commit(type.LOGOUT)
        } else if (path == '/tel') {
          //拨打电话
          window.location.href = 'tel://10086'
        } else {
          this.$router.push({path: path})
        }
      },

      goLogin () {
        // 注册或者登录
        this.$router.push({path: '/login'})
      },
      uploadHeadImg () {
        // 点击的时候触发input打开图片上传的点击事件
        // this.$el.querySelector(".hiddenInput").click();
        this.$router.push({path: '/userInfo'})
      },
      // 将头像显示
      handleFile (e) {
        // 获取当前点击事件的target元素对其进行兼容
        let $target = e.target || e.srcElement
        //   取第一个元素
        let file = $target.files[0]
        /**
         * 使用FileReader对象，
         * web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，
         * 可以使用File对象或者Blob对象来指定所要处理的文件或数据。
         *  */
        var reader = new FileReader()// //读取本地文件，以gbk编码方式输出
        reader.onload = data => { // 成功读取后
          console.log(data)
          let res = data.target || data.srcElement
          // //读取完毕后输出结果
          this.userInfo.avatar = res.result
        }
        reader.readAsDataURL(file)
      }
    }
  }
</script>
<style lang="scss">
  @import '../../assets/style/common.scss';

  .login {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .about {
    background-color: #ffffff;
    padding-bottom: px2rem(80px);
  }

  .menu {
    padding: 1em;

    .menuDesc {
      padding: 1em;
      font-size: 16px;
      border-bottom: px2rem(1px) solid #ededed;
      background-color: #ffffff;

      &:active {
        background-color: #dcdcdc;
      }

      .text {
        margin-left: 10px;
        color: #000000;
      }
    }
  }

  .hide {
    display: none;
  }

  .hiddenInput {
    display: none;
  }

  .userName {
    margin-top: 5px;
    font-size: 16px;
  }

  .h-Nav {
    height: px2rem(250px);

    .header {
      display: inline-block;
      height: px2rem(150px);
      padding-top: px2rem(100px);
      padding-left: px2rem(20px);
    }

    .info-text {
      margin-left: px2rem(150px);
    }

    .nickName {
      position: relative;
      font-size: px2rem(40px);
      color: #000;
    }

    .mobile {
      padding-top: 10px;
      font-size: px2rem(25px);
      color: #000;
    }

    .info-right {
      float: right;
      padding-top: px2rem(135px);
      padding-right: px2rem(50px);
      font-size: px2rem(28px);
      color: #000;
    }
  }
</style>
